<template>
	<view class="a">
		<u-tabs class="tabs" :list="list" font-size="27" :is-scroll="true" active-color="red" :current="current"
			@change="change">
		</u-tabs>
		<view class="conn">
			<view class="box" @click="toDetails()">
				<p class="title">中国共产党十九届六中全会在京召开</p>
				<p class="msg">中国共产党第十九届中央委员会第六次全体会议8日上午在京召开。中央委员会总书记习近平代表中央政治局向全会作工作报告。</p>
				<p class="read">2021-11-08 11:49·新华网客户端</p>
			</view>
			<view class="box" @click="toDetails()">
				<p class="title">新时代中国为造福世界作出新贡献</p>
				<p class="msg">
					中国共产党第十九届中央委员会第六次全体会议于11月8日至11日在北京召开。今年是中国共产党成立100周年，国际社会对这次重要会议高度关注，对中国共产党的百年奋斗重大成就和历史经验持续发表分析评论。
				</p>
				<p class="read">2021-11-08 10:17·新华网客户端</p>
			</view>
			<view class="box" @click="toDetails()">
				<p class="title">习近平的“进博”关键词</p>
				<p class="msg">第四届中国国际进口博览会已经在上海拉开帷幕,中国国家主席习近平已连续四年出席开幕式并发表主旨演讲</p>
				<p class="read">2021-11-06 01:58·新华网客户端</p>
			</view>
			<view class="box" @click="toDetails()">
				<p class="title">“金色大门”越开越大——第四届中国国际进口博览会观察</p>
				<p class="msg">
					行走在第四届进博会形如“四叶草”的巨大展馆里，你会看见如万花筒般缤纷的万国奇货，听见各种语言说着“你好”，真切感受到货物“大海”的体量。一位外国与会嘉宾在开幕式上，把进博会比喻为通向中国广阔市场的“金色大门”。如今，这扇“金色大门”越开越大：全球企业在此展示新产品、结识新伙伴、开拓新市场，不断为全球创造新机遇。
				</p>
				<p class="read">2021-11-07 20:45·新华网客户端</p>
			</view>
			<view class="box" @click="toDetails()">
				<p class="title">放心！“菜篮子”供应充足</p>
				<p class="msg">
					10月中下旬以来，北方地区多晴好天气，蔬菜生产已基本恢复正常，采收上市量会陆续增加。”在农业农村部日前召开的今冬明春重要农产品生产保供情况新闻发布会上，农业农村部市场与信息化司司长唐珂介绍，近日，全国总体菜价涨幅已经收窄，不少地区菠菜、生菜等绿叶菜价格开始明显回落
				</p>
				<p class="read">2021-11-08 10:48 经济日报</p>
			</view>
			<view class="box" @click="toDetails()">
				<p class="title">把完成当作一种习惯</p>
				<p class="msg">以前会给自己定小目标，日更多少天、阅读多少天。而这往往的结果是，做不到，或者执行过程中困难重重。因此现在做一件事，不定长远目标，持续地完成就可以了。</p>
				<p class="read">2021-11-06 10:40 过云雨生活感悟</p>
			</view>
		</view>
		<u-tabbar :list="tabbar"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '同城'
				}, {
					name: '推荐'
				}, {
					name: '热点',
				}, {
					name: '社会',
				}, {
					name: '国内',
				}, {
					name: '国际',
				}, {
					name: '娱乐',
				}, {
					name: '科技',
				}, {
					name: '体育',
				}, {
					name: '文学',
				}, {
					name: '历史',
				}, {
					name: '搞笑',
				}, {
					name: '宠物',
				}, {
					name: '育儿',
				}, {
					name: '动漫',
				}],
				current: 1
			}
		},
		computed: {
			tabbar() {
				return this.$store.state.tabbar
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			toDetails() {
				uni.navigateTo({
					url: '/pages/details/details?id=123'
				});
			}
		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.a {
		width: 100%;
		height: 100%
	}

	.tabs {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
	}


	.conn {
		width: 100%;
		height: calc(100% - 120rpx);
		overflow-y: auto;
	}

	.box {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #f8f9f9;
	}

	.title {
		font-size: 35rpx;
		font-weight: 800;
	}

	.msg {
		margin-top: 15rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.read {
		margin-top: 15rpx;
		font-size: 13rpx;
		color: #808080;
	}
</style>
